<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />

	<style>
		#tabs {height: 600px; width: 700px;}
		#tabs ul {
			width: 100px !important;
			float: left;
			height: 590px;
		}
		
		.ui-tabs-panel p, #wordslist p {margin: 8px 0; }
		
		.ui-widget { font-size: 1em; }
		.ui-widget-content {background-image: none; background-color: #fafafa;}
		.ui-tabs .ui-tabs-nav {padding: 0.2em 0 0.2em 0.2em !important;}
		.ui-widget-header {border-right: none;}
		.ui-tabs .ui-tabs-panel {padding: 0 1em; overflow: auto; height: 596px; }
		.ui-tabs .ui-tabs-nav li {width: 99%; top: 0 !important; margin: 1px 0 0 !important;}
		.ui-tabs .ui-tabs-nav li.ui-tabs-selected { width: 100%; padding-bottom: 0 !important; }
		.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none;  background-color: #fafafa !important; }
		.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none; background-image: none; background-color: #eaeaea;}
		.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { outline: none; }
		

		.mouseenterSentance {background-color:#cfecfe;}
		.mouseenterWord {background-color:#fcefce; cursor: pointer;}
		
		#dictionary {width: 280px; position: relative; top:-608px; left: 715px; padding: 0.2em}
		#wordslist {height:600px; overflow: auto;}
		
		#dialog textarea {width:100%; height: 100%;}
		
		.wordFromDic {text-decoration: underline; color: maroon !important;}

	</style>

</head>
<body>

<script>
	$(function() {
	
		$( "#dialog" ).dialog({	autoOpen: false, show: "blind",	hide: "explode"	});

		$("#tabs").load("movies/scn/The.Young.Victoria", function() {buildTabs()});

		$("#dictionary").addClass("ui-widget ui-widget-content ui-corner-all");

		function buildTabs() {
			$("#tabs").tabs({
				cache: true,
				load: function(event, ui) {
					$(".tabs-left .ui-tabs-nav, .tabs-left .ui-tabs-nav > *").removeClass(
					"ui-corner-all ui-corner-top").addClass(
					"ui-corner-tl ui-corner-bl");
					
					littering("#"+ui.panel.id);
					
					$("#wordslist > p").each(function() {
						var word = $(this).attr("id");
						$("#"+ui.panel.id+" a[name='"+word+"']").addClass("wordFromDic");
					});
				},
				ajaxOptions:{
					error: 	 function( xhr, status, index, anchor ) {
						$( anchor.hash ).html(
								"Couldn't load this tab. We'll try to fix this as soon as possible. " +
								"If this wouldn't be a demo." );
					}
				}
			});
		}
		
		function littering(ui) {
			$(ui+" p").html(function parseSentences(index, oldText) {
				return oldText.replace(/([^\.?!]*[\.?!] *)/g, "<span>$1</span>");
			})

			$(ui+" p span").html(function parseWords(index, oldText) {
				return oldText.replace(/(\S*[^\s.,!?])/g, "<a>$1</a>");
			}).mouseenter(function() {
				$(this).addClass("mouseenterSentance")
			}).mouseleave(function() {
				$(this).removeClass("mouseenterSentance")
			});

			$(ui+" p span a").attr("name", function() { 
			    return this.firstChild.data.toLowerCase(); 
			});

			$(ui+" p span a").mouseenter(function() {
				$(this).addClass("mouseenterWord")
				if ($(this).hasClass("wordFromDic")) {
					var wordId = $(this).text().toLowerCase();
					$("#wordslist #"+wordId).addClass("wordFromDic")
				}
			}).mouseleave(function() {
				$(this).removeClass("mouseenterWord")
				if ($(this).hasClass("wordFromDic")) {
					var wordId = $(this).text().toLowerCase();
					$("#wordslist #"+wordId).removeClass("wordFromDic")
				}
			}).click(function() {
				var word = $(this).attr("name");
				openWordDescription(word);
				return false;
			});
		}

		function addWordToDictionary(word, tran) {
			var wordBox = $("<p/>"), 
				wordEl = document.createTextNode(word),
				tranEl = document.createTextNode(tran),
				separator = document.createTextNode(" - ");
			wordBox.attr("id", word);
			$("#wordslist").append(wordBox.append($("<span/>").append(wordEl), separator, $("<span/>").append(tranEl)));
		}

		function openWordDescription(word) {
			$.ajax({
				type: "POST",
				url: "classes/getword.processor.php",
				data: "word="+word,
				dataType: 'json',
				error: function(data) {
					$( "#dialog" ).dialog("option", {
						title: word,
						buttons: {
							"Save": function() {
								$.ajax({
									type: "POST",
									url: "classes/addword.processor.php",
									data: "word="+word+"&tran="+$("#dialog textarea").val()
								}).done(function() {
									addWordToDictionary(word, $("#dialog textarea").val());
									$("#tabs a[name='"+word+"']").addClass("wordFromDic");
									$("#dialog").dialog("close");
								});
							},
							"Cancel": function() { $(this).dialog("close"); }
						},
						close: function() {
							$("#dialog textarea").remove()
						},
						open: function() {
							$("<textarea/>").appendTo($("#dialog"));
						},
						focus: function() {
							$("#dialog a").click( function() {
								var url = "http://translate.google.com/#en|ru|"	+ word;
								window.open(url, "google", "width=800,height=600,toolbar=0,location=0,directories=0,menubar=0,scrollbars=1,status=0");
							});
						}  
					}).dialog( "open" );
				},
				success: function(data) {
					$( "#dialog" ).dialog("option", {
						title: word,
						buttons: {
							"Save": function() {
								$.ajax({
									type: "POST",
									url: "classes/addword.processor.php",
									data: "word="+word+"&tran="+$("#dialog textarea").val()	
								}).done(function() {
									addWordToDictionary(word, $("#dialog textarea").val());
									$("#tabs a[name='"+word+"']").addClass("wordFromDic");
									$("#dialog").dialog("close");
								});
							},
							"Cancel": function() { $(this).dialog("close"); }
						},
						close: function() {
							$("#dialog ul").remove();
						},
						open: function() {
							var items = [];
						  	$.each(data, function(key, val) {
							    items.push('<li><b>' + key + '</b>: <a>' + val.replace(/; /g, '</a>; <a>') + '</a></li>');
							});
							$('<ul/>', {
								html: items.join('')
							}).appendTo('#dialog');
							
							$("#dialog li a").each(function() {
								var id = $(this).text().replace(/[^\[]+\[([^\]]+)]/g, "$1");
								$(this).attr("id", id);
								$(this).text(function(i,text){return text.replace(/\[[^\]]+\]/g, "")})
							});
							
							$("#dialog li a").click(function(){
								$(this).hasClass("wordFromDic") ? $(this).removeClass("wordFromDic") : $(this).addClass("wordFromDic");
							}).mouseenter(function(){
								$(this).addClass("mouseenterWord");
							}).mouseleave(function(){
								$(this).removeClass("mouseenterWord");
							});

						}
					}).dialog( "open" );
				}
			});
		}
	});
</script>

<div id="content-container">

	<div id="tabs" class="tabs-left"></div>

	<div id="dictionary"><div id="wordslist"></div></div>
	
</div>	

<div id="dialog" title="new word">
	<div><a href="#">Google Translator</a></div>
</div>
 
<iframe style="position: absolute; top: 10px; right: 10px;" 
	src="http://vkontakte.ru/video_ext.php?oid=-5041614&id=161255122&hash=9658f173aaeb087d&hd=1" 
	width="867" height="608" frameborder="0">
</iframe>




</body>
</html>